<template>
  <div class="widget-grid">
    <h3 class="widget-grid__title">{{ title }}</h3>

    <table v-if="!vertical" class="widget-grid__table">
      <thead>
        <tr>
          <th width="120">控件/状态</th>
          <th v-for="(item, index) in modes" :key="index" :title="item.title">{{ item.label }} {{ item.title }}</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="item in rows" :key="item.key" :height="item.height">
          <th><i class="widget-icon" :class="item.icon"></i> {{ item.name }}</th>
          <td v-for="i in 4" :key="i"></td>
        </tr>
      </tbody>
    </table>

    <table v-else class="widget-grid__table">
      <colgroup>
        <col width="120" />
        <col />
      </colgroup>

      <tbody>
        <template v-for="item in rows">
          <tr :key="item.key" height="32">
            <th colspan="2">
              <i class="widget-icon" :class="item.icon"></i>
              {{ item.name }}
            </th>
          </tr>

          <tr v-for="(mode, index) in modes" :key="index" :height="item.height">
            <th :title="mode.title">{{ mode.label }}<br />{{ mode.title }}</th>
            <td></td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { WidgetOption } from 'fdd-contract'

/** 控件列表 */
export default defineComponent({
  name: 'WidgetGrid',

  props: {
    /** 标题 */
    title: { type: String, default: '控件列表' },

    /** 需要展示的控件列表 */
    list: {
      type: Array as PropType<WidgetOption[]>,
      default: () => []
    },

    /** 是否纵向展示 */
    vertical: {
      type: Boolean,
      default: false
    }
  },

  setup(props) {
    return {
      /** 行 */
      rows: computed(() =>
        props.list.map(item => ({
          key: item.key,
          name: item.name,
          icon: item.icon,
          height: item.height + (props.vertical ? 80 : 40)
        }))
      ),

      /** 模式 */
      modes: [
        { label: '设置', title: 'WidgetMode.SET' },

        { label: '使用', title: 'WidgetMode.USE' },

        { label: '查看', title: 'WidgetMode.VIEW' },

        { label: '完成', title: 'WidgetMode.DONE' }
      ]
    }
  }
})
</script>

<style lang="scss" scoped>
.widget-grid {
  position: relative;
  margin: 20px;
  pointer-events: none;

  &__title {
    margin: 0;
    margin-bottom: 20px;
    font-weight: 400;
    font-size: 20px;
  }

  &__table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    thead tr {
      height: 36px;
    }

    th,
    td {
      padding: 0;
      text-align: center;
      border: 1px solid #eee;
    }

    th {
      font-weight: 400;
      font-size: 13px;
      background: #fafafa;
    }

    tbody th {
      font-size: 12px;
    }
  }
}
</style>
